<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>字体图标(glyphicons)</title>
<meta name="Generator" content="EditPlus" charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/components.css">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
	<div class="bs-docs-section">
		<h1 id="glyphicons" class="page-header">字体图标(glyphicons)</h1>
		<h2 id="glyphicons-glyphs">所有可用图标</h2>
		<p>包括260个来自 Glyphicon Halflings 的字体图标<a href="http://glyphicons.com/">Glyphicons</a>Halflings一般是收费的， 但是他们的作者
		    允许 Bootstrap 免费使用。为了表示感谢，希望你在使用时尽量为 <ahref="http://glyphicons.com/">Glyphicons</a> 添加一个友情链接。
		</p>
		<div class="bs-glyphicons">
			<ul class="bs-glyphicons-list">{% for iconClassName in site.data.glyphicons %}
				<li>
					<span class="glyphicon {{ iconClassName }}" aria-hidden="true"></span> 
				    <span class="glyphicon-class">glyphicon{{ iconClassName }}</span>
				</li> 
				{% endfor %}
			</ul>
		</div>

		<h2 id="glyphicons-how-to-use">如何使用</h2>
		<p>出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），
		    务必在图标和文本之间添加一个空格。</p>
		<div class="bs-callout bs-callout-danger" id="callout-glyphicons-dont-mix">
			<h4>不要和其他组件混合使用</h4>
			<p>图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的<code>&lt;span&gt;</code>标签， 并将
			      图标类应用到这个<code>&lt;span&gt;</code>标签上。
			</p>
		</div>
		<div class="bs-callout bs-callout-danger" id="callout-glyphicons-empty-only">
			<h4>只对内容为空的元素起作用</h4>
			<p>图标类只能应用在不包含任何文本内容或子元素的元素上</p>
		</div>
		<div class="bs-callout bs-callout-info" id="callout-glyphicons-location">
			<h4>改变图标字体文件的位置</h4>
			<p>Bootstrap 假定所有的图标字体文件全部位于<code>../fonts/</code>目录内，相对于预编译版 CSS 文件的目录。如果你修改了图标字体 文件的
			      位置，那么，你需要通过下面列出的任何一种方式来更新 CSS文件：
			</p>
			<ul>
				<li>在 Less 源码文件中修改 <code>@icon-font-path</code> 和/或 <code>@icon-font-name</code>变量。</li>
				<li>利用 Less 编译器提供的 <a href="http://lesscss.org/usage/#command-line-usage-relative-urls">相对URL 地址选项</a>。</li>
				<li>修改预编译 CSS 文件中的 <code>url()</code> 地址。</li>
			</ul>
			<p>根据你自身的情况选择一种方式即可。</p>
		</div>
		<div class="bs-callout bs-callout-warning" id="callout-glyphicons-accessibility">
			<h4>Accessible icons</h4>
			<p>Modern versions of assistive technologies will announce CSSgenerated content, as well as specific Unicode characters. 
			   To avoidunintended and confusing output in screen readers (particularly when icons are used purely for decoration), we 
			   hide them with the <code>aria-hidden="true"</code>attribute.
			</p>
			<p>If you're using an icon to convey meaning (rather than only as adecorative element), ensure that this meaning is also 
			   conveyed to assistive technologies – for instance, include additional content,visually hidden with the 
			   <code>.sr-only</code> class.
			</p>
			<p>If you're creating controls with no other text (such as a <code>&lt;button&gt;</code> that only contains an icon), you 
			   should always provide alternative content to identify the purpose of the control, so that it will make sense to users of 
			   assistive technologies. In this case, you could add an<code>aria-label</code> attribute on the control itself.
			</p>
		</div>
		{% highlight html %} 
		<span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
		{% endhighlight %}

		<h2 id="glyphicons-examples">实例</h2>
		<p>可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。</p>
		<div class="bs-example" data-example-id="glyphicons-general">
			<div class="btn-toolbar" role="toolbar">
				<div class="btn-group">
					<button type="button" class="btn btn-default" aria-label="Left Align">
						<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
					</button>
					<button type="button" class="btn btn-default" aria-label="Center Align">
						<span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
					</button>
					<button type="button" class="btn btn-default" aria-label="Right Align">
						<span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
					</button>
					<button type="button" class="btn btn-default" aria-label="Justify">
						<span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
					</button>
				</div>
			</div>
			<div class="btn-toolbar" role="toolbar">
				<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>Star</button>
				<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>Star</button>
				<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>Star</button>
				<button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>Star</button>
			</div>
		</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">aria-label=</span><span class="s">"Left Align"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-align-left"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>

<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default btn-lg"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-star"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/span&gt;</span> Star
<span class="nt">&lt;/button&gt;</span></code></pre>
</div>
  <p>An icon used in an <a href="#alerts">alert</a> to convey that it's an error message, with additional <code>.sr-only</code> text to convey this hint to users of assistive technologies.</p>
  <div class="bs-example">
    <div class="alert alert-danger" role="alert">
      <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
      <span class="sr-only">Error:</span>
      	请输入一个有效的邮箱地址
    </div>
  </div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-exclamation-sign"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/span&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Error:<span class="nt">&lt;/span&gt;</span>
  请输入一个有效的邮箱地址
<span class="nt">&lt;/div&gt;</span></code></pre></div>
 
</div> 

</body>
</html>
